import { computed, toRef, toValue } from 'vue';
import type {
  DataItemOptions,
  Thresholds,
  MaybeRefOrGetter,
} from './types';

export function useDataItem(options: MaybeRefOrGetter<DataItemOptions>) {
  const opts = toValue(options);

  /* —— 1. 必需字段 —— */
  const label = toRef(opts, 'label');
  const valueRef = toRef(opts, 'value'); // Ref<MaybeRefOrGetter<number>>

  /* —— 2. 带默认值 —— */
  const decimals = computed(() => toValue(opts.decimals ?? 2));
  const extraDigits = computed(() => toValue(opts.extraDigits ?? 0));
  const prefix = computed(() => toValue(opts.prefix ?? ''));
  const suffix = computed(() => toValue(opts.suffix ?? ''));
  const unit = computed(() => toValue(opts.unit ?? ''));
  const loading = computed(() => toValue(opts.loading ?? false));

  /* —— 3. 其它可选 —— */
  const thresholdsRef = toRef(opts, 'thresholds');
  const tooltip = toRef(opts, 'tooltip');

  // 函数保持普通值
  const formatter = opts.formatter;
  const onClick = opts.onClick ?? (() => { });

  /* —— 4. 样式 / 类名 —— */
  const wrapperClass = toRef(opts, 'wrapperClass');
  const wrapperStyle = toRef(opts, 'wrapperStyle');
  const labelClass = toRef(opts, 'labelClass');
  const labelStyle = toRef(opts, 'labelStyle');
  const separatorClass = toRef(opts, 'separatorClass');
  const separatorStyle = toRef(opts, 'separatorStyle');
  const valueClass = toRef(opts, 'valueClass');
  const valueStyle = toRef(opts, 'valueStyle');
  const skeletonClass = toRef(opts, 'skeletonClass');
  const skeletonStyle = toRef(opts, 'skeletonStyle');

  /* —— 5. 数字格式化 —— */
  function formatValue(v: MaybeRefOrGetter<number>) {
    const raw = toValue(v);
    if (formatter) return formatter(raw);
    return raw.toLocaleString(undefined, {
      minimumFractionDigits: decimals.value,
      maximumFractionDigits: decimals.value,
    });
  }

  /* —— 6. 显示文本 & 最小宽度 —— */
  const displayText = computed(() => {
    const base = `${prefix.value}${formatValue(valueRef.value)}${suffix.value}`;
    return unit.value ? `${base} ${unit.value}` : base;
  });

  const minWidth = computed(() => displayText.value.length + extraDigits.value);

  /* —— 7. 阈值高亮颜色 —— */
  const thresholdColor = computed<string>(() => {
    const t = toValue(thresholdsRef.value) as Thresholds | undefined;
    const v = toValue(valueRef.value);
    if (!t) return '';

    // 固定颜色优先
    const fixedColor = t.color ? toValue(t.color) : undefined;
    if (fixedColor) return fixedColor;

    const upVal = t.up !== undefined ? toValue(t.up) : undefined;
    const downVal = t.down !== undefined ? toValue(t.down) : undefined;

    if (upVal !== undefined && v >= upVal) return 'green';
    if (downVal !== undefined && v <= downVal) return 'red';
    return '';
  });

  /* —— 8. 返回 —— */
  return {
    label,
    loading,
    tooltip,
    onClick,

    displayText,
    minWidth,
    thresholdColor,

    wrapperClass,
    wrapperStyle,
    labelClass,
    labelStyle,
    separatorClass,
    separatorStyle,
    valueClass,
    valueStyle,
    skeletonClass,
    skeletonStyle,
  };
}
